@import "../ea-ui-base-style.scss";
@import "../ea-icon/index.scss";

@mixin ea-avatar-size($size-name, $size) {
  &.ea-avatar--#{$size-name} {
    width: $size;
    height: $size;
    line-height: $size;
  }
}

$fit-type: fill contain cover none scale-down;
@mixin ea-object-fit($type) {
  &.ea-avatar-fill--#{$type} {
    img {
      object-fit: $type;
    }
  }
}

.ea-avatar_wrap {
  .ea-avatar {
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #ffffff;

    @each $type in $fit-type {
      @include ea-object-fit($type);
    }

    @include ea-avatar-size("normal", 50px);
    @include ea-avatar-size("large", 40px);
    @include ea-avatar-size("medium", 36px);
    @include ea-avatar-size("small", 28px);

    .ea-avatar--text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &.ea-avatar--circle {
      border-radius: 50%;
    }

    &.ea-avatar--square {
      border-radius: 5px;
    }

    .ea-avatar--img {
      width: 100%;
      height: 100%;

      object-fit: cover;
    }
  }
}
